import React, { useState, useRef } from 'react';
import { Upload, Button, Card, Row, Col, Tabs, Radio, Input, Slider, message } from 'antd';
import { InboxOutlined, DownloadOutlined, ArrowLeftOutlined, UploadOutlined } from '@ant-design/icons';
import Link from 'next/link';
import { fabric } from 'fabric';
import Layout from '../../../components/layout/Layout';
import styles from '../../../styles/ToolDetail.module.css';

const { Dragger } = Upload;
const { TabPane } = Tabs;

// 自定义颜色选择器
const ColorPicker = ({ value, onChange }) => {
  return (
    <div style={{ display: 'flex', alignItems: 'center' }}>
      <input
        type="color"
        value={value}
        onChange={(e) => onChange(e.target.value)}
        style={{ 
          width: '36px', 
          height: '36px', 
          padding: '0', 
          margin: '0 8px 0 0',
          border: '1px solid #d9d9d9',
          borderRadius: '4px',
          cursor: 'pointer'
        }}
      />
      <Input 
        value={value} 
        onChange={(e) => onChange(e.target.value)}
        style={{ width: '100px' }}
      />
    </div>
  );
};

const WatermarkPage = () => {
  const [originalImage, setOriginalImage] = useState(null);
  const [processedImage, setProcessedImage] = useState(null);
  const [originalSize, setOriginalSize] = useState(0);
  const [loading, setLoading] = useState(false);
  const [mode, setMode] = useState('add'); // 'add' 或 'remove'
  const [fileInfo, setFileInfo] = useState(null);
  
  // 水印添加相关状态
  const [watermarkText, setWatermarkText] = useState('水印文字');
  const [watermarkImage, setWatermarkImage] = useState(null);
  const [watermarkType, setWatermarkType] = useState('text'); // 'text' 或 'image'
  const [watermarkOpacity, setWatermarkOpacity] = useState(30);
  const [watermarkColor, setWatermarkColor] = useState('#000000');
  const [watermarkSize, setWatermarkSize] = useState(24);
  const [watermarkPosition, setWatermarkPosition] = useState('center');
  const [watermarkAngle, setWatermarkAngle] = useState(0); // 水印旋转角度
  
  // 增加一个新的状态来跟踪Canvas尺寸
  const [canvasSize, setCanvasSize] = useState({ width: 0, height: 0 });
  // 添加调试状态
  const [isDebugging, setIsDebugging] = useState(false);
  
  const canvasRef = useRef(null);
  const fabricCanvasRef = useRef(null);
  
  // 上传前检查文件
  const beforeUpload = (file) => {
    const isImage = file.type.startsWith('image/');
    if (!isImage) {
      message.error('只能上传图片文件!');
      return false;
    }
    
    const isLt5M = file.size / 1024 / 1024 < 5;
    if (!isLt5M) {
      message.error('图片必须小于5MB!');
      return false;
    }
    
    setFileInfo({
      type: file.type,
      name: file.name,
      size: file.size
    });
    
    // 显示原始图片预览
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => {
      setOriginalImage(reader.result);
      setOriginalSize(file.size);
      setProcessedImage(null);
    };
    
    return false; // 阻止自动上传
  };
  
  // 上传水印图片
  const beforeUploadWatermark = (file) => {
    const isImage = file.type.startsWith('image/');
    if (!isImage) {
      message.error('只能上传图片文件!');
      return false;
    }
    
    const isLt1M = file.size / 1024 / 1024 < 1;
    if (!isLt1M) {
      message.error('水印图片必须小于1MB!');
      return false;
    }
    
    // 显示水印图片预览
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => {
      setWatermarkImage(reader.result);
    };
    
    return false; // 阻止自动上传
  };
  
  // 初始化Canvas
  const initCanvas = (image) => {
    console.log('开始初始化Canvas，图片尺寸:', image.width, 'x', image.height);
    
    return new Promise((resolve, reject) => {
      try {
        // 销毁旧的Canvas实例
        if (canvasRef.current?.fabric) {
          console.log('销毁旧的Canvas实例');
          canvasRef.current.fabric.dispose();
        }
        
        // 创建新的Canvas实例
        console.log('创建新的Canvas实例');
        const fabricCanvas = new fabric.Canvas('watermarkCanvas', {
          width: image.width,
          height: image.height,
          preserveObjectStacking: true
        });
        
        // 保存Canvas实例以便后续使用
        canvasRef.current = {
          fabric: fabricCanvas,
          width: image.width,
          height: image.height
        };
        
        // 更新Canvas尺寸状态
        setCanvasSize({
          width: image.width,
          height: image.height
        });
        console.log('Canvas尺寸设置为:', image.width, 'x', image.height);
        
        // 设置背景图片
        fabric.Image.fromURL(image.src, (img) => {
          console.log('背景图片加载成功，设置到Canvas');
          
          // 设置图片作为背景，保持原始尺寸
          fabricCanvas.setBackgroundImage(img, fabricCanvas.renderAll.bind(fabricCanvas), {
            scaleX: 1,
            scaleY: 1,
            top: 0,
            left: 0,
            originX: 'left',
            originY: 'top'
          });
          
          console.log('背景图片设置完成');
          resolve(fabricCanvas);
        }, { crossOrigin: 'anonymous' });
      } catch (error) {
        console.error('Canvas初始化失败:', error);
        reject(error);
      }
    });
  };
  
  // 处理水印添加方法
  const handleAddWatermark = async () => {
    if (!originalImage) {
      message.error('请先上传图片');
      return;
    }
    
    setLoading(true);
    console.log('开始处理水印添加...');
    
    try {
      const img = new Image();
      
      // 使用Promise来等待图片加载完成
      await new Promise((resolve, reject) => {
        img.onload = resolve;
        img.onerror = (e) => reject(new Error('图片加载失败: ' + e));
        img.src = originalImage;
        img.crossOrigin = 'anonymous'; // 添加跨域支持
      });
      console.log('原始图片加载完成，尺寸:', img.width, 'x', img.height);
      
      // 初始化Canvas并等待完成
      const canvas = await initCanvas(img);
      console.log('Canvas初始化完成，尺寸:', canvas.width, 'x', canvas.height);
      
      if (watermarkType === 'text') {
        // 添加文字水印
        if (!watermarkText || watermarkText.trim() === '') {
          throw new Error('水印文字不能为空');
        }
        
        console.log('添加文字水印:', watermarkText, '颜色:', watermarkColor, '大小:', watermarkSize);
        
        // 使用Fabric.js添加文字水印
        const text = new fabric.Text(watermarkText, {
          fontSize: watermarkSize,
          fill: watermarkColor,
          opacity: watermarkOpacity / 100,
          angle: watermarkAngle,
          stroke: watermarkColor === '#ffffff' ? '#000000' : '#ffffff',
          strokeWidth: 0.5,
          fontFamily: 'Arial, sans-serif',
          fontWeight: 'bold',
          shadow: new fabric.Shadow({
            color: 'rgba(0,0,0,0.3)',
            blur: 3,
            offsetX: 2,
            offsetY: 2
          })
        });
        console.log('文字水印对象创建完成:', text);
        
        // 根据选择的位置确定坐标
        switch (watermarkPosition) {
          case 'topLeft':
            text.set({ left: 20, top: 20 });
            break;
          case 'topRight':
            text.set({ left: canvas.width - text.width - 20, top: 20 });
            break;
          case 'bottomLeft':
            text.set({ left: 20, top: canvas.height - text.height - 20 });
            break;
          case 'bottomRight':
            text.set({ left: canvas.width - text.width - 20, top: canvas.height - text.height - 20 });
            break;
          case 'center':
          default:
            text.set({ left: canvas.width / 2, top: canvas.height / 2, originX: 'center', originY: 'center' });
            break;
        }
        console.log('水印位置设置完成:', watermarkPosition, '坐标:', text.left, text.top);
        
        // 添加文字并确保渲染
        canvas.add(text);
        console.log('文字添加到Canvas');
        
        // 确保文字可见性
        text.bringToFront();
        canvas.renderAll();
        console.log('Canvas渲染完成');
        
        // 导出处理后的图片
        try {
          const format = fileInfo && fileInfo.type ? fileInfo.type.replace('image/', '') : 'png';
          const dataUrl = canvas.toDataURL({
            format: format,
            quality: 1.0,
            multiplier: 1.0
          });
          
          console.log('图片导出成功，数据长度:', dataUrl.length);
          setProcessedImage(dataUrl);
        } catch (error) {
          console.error('导出图片失败:', error);
          throw new Error('导出图片失败: ' + error.message);
        }
      } else if (watermarkType === 'image' && watermarkImage) {
        // 添加图片水印
        console.log('准备添加图片水印');
        
        await new Promise((resolve, reject) => {
          fabric.Image.fromURL(watermarkImage, (watermark) => {
            try {
              // 缩放水印图片
              const maxSize = Math.min(canvas.width, canvas.height) * 0.2; // 水印最大尺寸为原图较小边的20%
              const scale = Math.min(maxSize / watermark.width, maxSize / watermark.height);
              watermark.scale(scale);
              
              watermark.set({
                opacity: watermarkOpacity / 100,
                angle: watermarkAngle
              });
              
              // 根据选择的位置确定坐标
              switch (watermarkPosition) {
                case 'topLeft':
                  watermark.set({ left: 20, top: 20 });
                  break;
                case 'topRight':
                  watermark.set({ left: canvas.width - watermark.getScaledWidth() - 20, top: 20 });
                  break;
                case 'bottomLeft':
                  watermark.set({ left: 20, top: canvas.height - watermark.getScaledHeight() - 20 });
                  break;
                case 'bottomRight':
                  watermark.set({ left: canvas.width - watermark.getScaledWidth() - 20, top: canvas.height - watermark.getScaledHeight() - 20 });
                  break;
                case 'center':
                default:
                  watermark.set({ left: canvas.width / 2, top: canvas.height / 2, originX: 'center', originY: 'center' });
                  break;
              }
              
              canvas.add(watermark);
              watermark.bringToFront();
              canvas.renderAll();
              
              // 导出处理后的图片
              const format = fileInfo && fileInfo.type ? fileInfo.type.replace('image/', '') : 'png';
              const dataUrl = canvas.toDataURL({
                format: format,
                quality: 1.0,
                multiplier: 1.0
              });
              
              setProcessedImage(dataUrl);
              resolve();
            } catch (error) {
              console.error('添加图片水印时出错:', error);
              reject(error);
            }
          }, { crossOrigin: 'anonymous' });
        });
        
        console.log('图片水印添加完成');
      } else {
        message.error('水印图片未上传');
      }
    } catch (error) {
      console.error('处理水印时出错:', error);
      message.error('处理水印时出错: ' + error.message);
    } finally {
      setLoading(false);
    }
  };
  
  // 处理水印移除
  const handleRemoveWatermark = () => {
    if (!originalImage) {
      message.error('请先上传图片');
      return;
    }
    
    setLoading(true);
    
    // 这里我们使用简化的水印移除算法
    // 实际应用中可能需要更复杂的算法或AI技术
    
    const img = new Image();
    img.crossOrigin = 'anonymous'; // 添加跨域支持
    
    img.onload = () => {
      const canvas = document.createElement('canvas');
      canvas.width = img.width;
      canvas.height = img.height;
      const ctx = canvas.getContext('2d');
      
      // 绘制原始图片
      ctx.drawImage(img, 0, 0);
      
      // 应用简单的高斯模糊和锐化算法模拟水印移除
      // 这只是一个简化的示例，实际应用中可能需要更复杂的算法
      const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
      const data = imageData.data;
      
      // 模拟水印移除效果（简化版本，实际项目可能需要更复杂的算法）
      for (let i = 0; i < data.length; i += 4) {
        // 轻微调整亮度和对比度
        const brightness = 10;
        const contrast = 1.2;
        
        data[i] = Math.min(255, Math.max(0, (data[i] - 128) * contrast + 128 + brightness));
        data[i + 1] = Math.min(255, Math.max(0, (data[i + 1] - 128) * contrast + 128 + brightness));
        data[i + 2] = Math.min(255, Math.max(0, (data[i + 2] - 128) * contrast + 128 + brightness));
      }
      
      ctx.putImageData(imageData, 0, 0);
      
      // 确定输出格式
      const outputFormat = fileInfo && fileInfo.type ? fileInfo.type : 'image/png';
      
      // 输出处理后的图片
      setTimeout(() => {
        setProcessedImage(canvas.toDataURL(outputFormat, 0.95));
        setLoading(false);
        message.info('水印移除功能是简化版本，效果可能不尽如人意。实际应用需要更复杂的算法。');
      }, 1000);
    };
    
    img.src = originalImage;
  };
  
  // 下载处理后的图片
  const handleDownload = () => {
    if (!processedImage) return;
    
    // 创建一个链接用于下载
    const link = document.createElement('a');
    link.href = processedImage;
    
    // 设置文件名
    const fileName = fileInfo.name.split('.')[0];
    const extension = fileInfo.type.split('/')[1];
    link.download = `${fileName}_watermark.${extension}`;
    
    // 添加到文档中并点击以触发下载
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  };
  
  // 格式化文件大小
  const formatFileSize = (bytes) => {
    if (bytes === 0) return '0 B';
    
    const k = 1024;
    const sizes = ['B', 'KB', 'MB', 'GB'];
    const i = Math.floor(Math.log(bytes) / Math.log(k));
    
    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
  };
  
  const positionOptions = [
    { label: '左上角', value: 'topLeft' },
    { label: '右上角', value: 'topRight' },
    { label: '左下角', value: 'bottomLeft' },
    { label: '右下角', value: 'bottomRight' },
    { label: '中心', value: 'center' },
  ];
  
  // 添加调试功能，显示Canvas元素
  const toggleDebug = () => {
    setIsDebugging(!isDebugging);
    console.log('调试模式:', !isDebugging);
  };
  
  return (
    <Layout title="图片水印处理 - 在线工具平台" description="在线为图片添加或移除水印">
      <div className={styles.toolHeader}>
        <div className={styles.container}>
          <Link href="/image-tools" className={styles.backLink} legacyBehavior>
            <a className={styles.backLink}>
              <ArrowLeftOutlined /> 返回图片工具
            </a>
          </Link>
          <h1 className={styles.toolTitle}>图片水印处理</h1>
          <p className={styles.toolDescription}>
            为您的图片添加自定义水印或移除已有水印，保护图片版权或净化图片
          </p>
          {/* 添加调试按钮 */}
          <Button 
            type="link" 
            onClick={toggleDebug} 
            size="small" 
            style={{ position: 'absolute', right: '10px', top: '10px' }}
          >
            {isDebugging ? '关闭调试' : '开启调试'}
          </Button>
        </div>
      </div>

      <div className={styles.toolContent}>
        <div className={styles.container}>
          <Card className={styles.toolCard}>
            <Tabs 
              activeKey={mode} 
              onChange={(key) => {
                setMode(key);
                // 切换标签时保留当前已上传的图片，但清除处理结果
                setProcessedImage(null);
              }}
            >
              <TabPane tab="添加水印" key="add">
                <div className={styles.uploadSection}>
                  {!originalImage ? (
                    <Dragger
                      name="file"
                      multiple={false}
                      beforeUpload={beforeUpload}
                      showUploadList={false}
                      disabled={loading}
                    >
                      <p className="ant-upload-drag-icon">
                        <InboxOutlined />
                      </p>
                      <p className="ant-upload-text">点击或拖拽图片到此区域上传</p>
                      <p className="ant-upload-hint">
                        支持PNG、JPG、JPEG、WEBP格式，单个文件不超过5MB
                      </p>
                    </Dragger>
                  ) : (
                    <div className={styles.watermarkSettings}>
                      <Row gutter={24}>
                        <Col xs={24} md={12}>
                          <div className={styles.imagePreview}>
                            <img src={originalImage} alt="预览" style={{ maxWidth: '100%' }} />
                            <div className={styles.imageInfo}>
                              <span>原始大小: {formatFileSize(originalSize)}</span>
                              <Button 
                                type="primary" 
                                size="small" 
                                onClick={() => {
                                  setOriginalImage(null);
                                  setProcessedImage(null);
                                  setWatermarkImage(null);
                                }}
                                style={{ marginLeft: '10px' }}
                              >
                                重新上传
                              </Button>
                            </div>
                          </div>
                        </Col>
                        
                        <Col xs={24} md={12}>
                          <h3>水印设置</h3>
                          
                          <div className={styles.settingItem}>
                            <p>水印类型:</p>
                            <Radio.Group 
                              value={watermarkType} 
                              onChange={(e) => setWatermarkType(e.target.value)}
                            >
                              <Radio value="text">文字水印</Radio>
                              <Radio value="image">图片水印</Radio>
                            </Radio.Group>
                          </div>
                          
                          {watermarkType === 'text' ? (
                            <>
                              <div className={styles.settingItem}>
                                <p>水印文字:</p>
                                <Input 
                                  value={watermarkText} 
                                  onChange={(e) => setWatermarkText(e.target.value)} 
                                  placeholder="请输入水印文字"
                                />
                              </div>
                              
                              <div className={styles.settingItem}>
                                <p>文字大小: {watermarkSize}px</p>
                                <Slider 
                                  min={12} 
                                  max={72} 
                                  value={watermarkSize} 
                                  onChange={setWatermarkSize} 
                                />
                              </div>
                              
                              <div className={styles.settingItem}>
                                <p>文字颜色:</p>
                                <ColorPicker 
                                  value={watermarkColor} 
                                  onChange={setWatermarkColor} 
                                />
                              </div>
                            </>
                          ) : (
                            <div className={styles.settingItem}>
                              <p>水印图片:</p>
                              <Upload
                                name="watermarkImage"
                                listType="picture-card"
                                className="watermark-image-uploader"
                                showUploadList={false}
                                beforeUpload={beforeUploadWatermark}
                              >
                                {watermarkImage ? (
                                  <img 
                                    src={watermarkImage} 
                                    alt="水印图片" 
                                    style={{ width: '100%' }} 
                                  />
                                ) : (
                                  <div>
                                    <UploadOutlined />
                                    <div style={{ marginTop: 8 }}>上传水印图片</div>
                                  </div>
                                )}
                              </Upload>
                              <p className="upload-hint">建议使用透明背景的PNG图片，大小不超过1MB</p>
                            </div>
                          )}
                          
                          <div className={styles.settingItem}>
                            <p>水印位置:</p>
                            <Radio.Group 
                              value={watermarkPosition} 
                              onChange={(e) => setWatermarkPosition(e.target.value)}
                              optionType="button"
                              buttonStyle="solid"
                            >
                              {positionOptions.map(option => (
                                <Radio.Button key={option.value} value={option.value}>
                                  {option.label}
                                </Radio.Button>
                              ))}
                            </Radio.Group>
                          </div>
                          
                          <div className={styles.settingItem}>
                            <p>不透明度: {watermarkOpacity}%</p>
                            <Slider 
                              min={10} 
                              max={100} 
                              value={watermarkOpacity} 
                              onChange={setWatermarkOpacity} 
                            />
                          </div>
                          
                          <div className={styles.settingItem}>
                            <p>旋转角度: {watermarkAngle}°</p>
                            <Slider 
                              min={-45} 
                              max={45} 
                              value={watermarkAngle} 
                              onChange={setWatermarkAngle} 
                            />
                          </div>
                          
                          <Button
                            type="primary"
                            size="large"
                            onClick={handleAddWatermark}
                            loading={loading}
                            style={{ marginTop: '16px' }}
                            block
                          >
                            添加水印
                          </Button>
                        </Col>
                      </Row>
                      
                      {/* Canvas调试部分不变 */}
                      <div style={{ marginTop: '20px', display: isDebugging ? 'block' : 'none' }}>
                        <h3>Canvas调试视图</h3>
                        <div style={{ border: '1px solid #ddd', padding: '10px', marginBottom: '10px' }}>
                          <p>Canvas尺寸: {canvasSize.width} x {canvasSize.height}</p>
                          <p>水印类型: {watermarkType}, 文本: {watermarkText}</p>
                          <p>水印位置: {watermarkPosition}, 颜色: {watermarkColor}</p>
                          <p>不透明度: {watermarkOpacity}%, 角度: {watermarkAngle}°</p>
                        </div>
                        <div style={{ border: '1px solid red', marginBottom: '10px' }}>
                          <canvas 
                            id="watermarkCanvas"
                            ref={canvasRef}
                            width={canvasSize.width} 
                            height={canvasSize.height} 
                            style={{ 
                              display: isDebugging ? 'block' : 'none',
                              border: '1px solid blue',
                              maxWidth: '100%'
                            }} 
                          />
                        </div>
                      </div>
                      
                      {/* 原有的隐藏canvas */}
                      {!isDebugging && (
                        <canvas 
                          id="watermarkCanvas"
                          ref={canvasRef}
                          width={canvasSize.width} 
                          height={canvasSize.height} 
                          style={{ display: 'none' }} 
                        />
                      )}
                    </div>
                  )}
                </div>
              </TabPane>
              
              <TabPane tab="移除水印" key="remove">
                <div className={styles.uploadSection}>
                  {!originalImage ? (
                    <Dragger
                      name="file"
                      multiple={false}
                      beforeUpload={beforeUpload}
                      showUploadList={false}
                      disabled={loading}
                    >
                      <p className="ant-upload-drag-icon">
                        <InboxOutlined />
                      </p>
                      <p className="ant-upload-text">点击或拖拽图片到此区域上传</p>
                      <p className="ant-upload-hint">
                        支持PNG、JPG、JPEG、WEBP格式，单个文件不超过5MB
                      </p>
                    </Dragger>
                  ) : (
                    <div className={styles.watermarkSettings}>
                      <Row gutter={24}>
                        <Col xs={24} md={12}>
                          <div className={styles.imagePreview}>
                            <img src={originalImage} alt="预览" style={{ maxWidth: '100%' }} />
                            <div className={styles.imageInfo}>
                              <span>原始大小: {formatFileSize(originalSize)}</span>
                              <Button 
                                type="primary" 
                                size="small" 
                                onClick={() => {
                                  setOriginalImage(null);
                                  setProcessedImage(null);
                                }}
                                style={{ marginLeft: '10px' }}
                              >
                                重新上传
                              </Button>
                            </div>
                          </div>
                        </Col>
                        
                        <Col xs={24} md={12}>
                          <h3>水印移除设置</h3>
                          <p className={styles.removalNote}>
                            水印移除功能会尝试自动检测并移除图片中的水印。
                            效果取决于原始水印的类型和图片质量。
                          </p>
                          
                          <Button
                            type="primary"
                            size="large"
                            onClick={handleRemoveWatermark}
                            loading={loading}
                            style={{ marginTop: '16px' }}
                            block
                          >
                            尝试移除水印
                          </Button>
                        </Col>
                      </Row>
                    </div>
                  )}
                </div>
              </TabPane>
            </Tabs>
            
            {processedImage && (
              <div className={styles.resultSection}>
                <h3>处理结果</h3>
                
                <Row gutter={24} className={styles.compareRow}>
                  <Col xs={24} md={12}>
                    <div className={styles.imageCompare}>
                      <h4>原始图片</h4>
                      <div className={styles.imagePreview}>
                        <img src={originalImage} alt="原始图片" style={{ maxWidth: '100%' }} />
                      </div>
                    </div>
                  </Col>
                  
                  <Col xs={24} md={12}>
                    <div className={styles.imageCompare}>
                      <h4>{mode === 'add' ? '添加水印后' : '移除水印后'}</h4>
                      <div className={styles.imagePreview}>
                        <img src={processedImage} alt="处理后图片" style={{ maxWidth: '100%' }} />
                      </div>
                    </div>
                  </Col>
                </Row>
                
                <div className={styles.actionButtons}>
                  <Button
                    type="primary"
                    icon={<DownloadOutlined />}
                    size="large"
                    onClick={handleDownload}
                  >
                    下载处理后图片
                  </Button>
                  
                  <Button
                    onClick={() => {
                      setProcessedImage(null);
                    }}
                  >
                    重新设置
                  </Button>
                  
                  <Button
                    onClick={() => {
                      setOriginalImage(null);
                      setProcessedImage(null);
                      setWatermarkImage(null);
                    }}
                  >
                    重新上传
                  </Button>
                </div>
              </div>
            )}
          </Card>
          
          <div className={styles.toolTips}>
            <h3>使用提示</h3>
            <ul>
              <li>文字水印适合添加版权信息、网站名称等内容</li>
              <li>图片水印适合添加logo或个人标识</li>
              <li>水印的不透明度根据实际需求调整，通常建议在30%-50%之间</li>
              <li>水印移除功能适用于简单的水印，复杂水印可能无法完全去除</li>
              <li>处理后的图片会保持原始图片的尺寸和格式</li>
            </ul>
          </div>
        </div>
      </div>
    </Layout>
  );
};

export default WatermarkPage; 